<template>
    <div class="mail-block-warp">
        <div class="block-left">
            <div class="left-content">
                {{ textAvatar }}
            </div>
        </div>
        <div class="block-right">
            <div>
                <div class="title">
                    <span v-if="flag" class="flag"></span>
                    {{ title }}
                    <div class="mydate">{{ formatDate }}</div>
                </div>
                <div class="sub-title">{{ getSubStringText(subTitle,24) }}</div>
                <div class="content" v-html="getSubStringText(content,48)">{{ getSubStringText(content,48) }}</div>
            </div>

        </div>
    </div>
</template>

<script>
    export default {
        name: "MailBlock",
        props:{
            title:{
                type:String,
                default:'',
                required:false
            },
            subTitle:{
                type:String,
                default:'',
                required:false
            },
            content:{
                type:String,
                default:'',
                required:false
            },
            flag:{
                type:Boolean,
                required:false,
                default:false
            },
            date:{
                type:String,
                required:false,
                default:''
            }
        },
        computed:{
            textAvatar(){
                if(this.title){
                    return this.title.substring(0,2)
                }
                return "?"
            },
            formatDate(){
                if(!this.date || this.date.lang==0){
                    return ''
                }
                return this.date.substr(0,10)
            }
        },
        methods:{
            getSubStringText(text,len){
                if(!text || text.length==0){
                    return ''
                }
                if(text.length<len){
                    return text;
                }
                return text.substr(0,len)+"..."
            }
        }
    }
</script>

<style scoped lang="less">
    .mail-block-warp{
        position: relative;
        width: 100%;
        vertical-align: top;
        .block-left{
            position: relative;
            width:50px;
            height:68px;
            display: inline-block;
            text-align: center;
            .left-content{
                position: absolute;
                top:0px;
                width: 45px;
                height: 45px;
                border: 1px solid #bca3dd;
                text-align: center;
                line-height: 45px;
                border-radius:50%
            }
        }
        .block-right{
            width: calc(100% - 56px);
            display: inline-block;
            margin-left: 6px;
            .title{
                font-size: 1rem;
                width: 100%;
                .flag{
                    display: inline-block;
                    margin-right:5px;
                    width: 8px;
                    height:8px;
                    background: #278aee;
                    border-radius: 8px;
                }
                .mydate{
                    float: right;
                    width: 100px;
                    font-size: .7rem;
                    color: #aaaaaa;
                    text-align: right;
                    margin-right: 2px
                }
            }
            .sub-title{
                font-size: 0.8rem
            }
            .content{
                font-size: 0.8rem;
                line-height: 0.9rem;
                color: #aaaaaa
            }
        }
    }

</style>